<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">{{groupData.dataArr[0].data[0].name}}</div>
    <div class="lesson-list">
      <scroll-container ref="scrollContainer">
        <multiList @scrollTo="scrollTo" :groupDatas="groupData" :groupOffset="0">
          <div class="item-list">
            <div v-for="(item, index) in voteOptions" :key="index" class="con">
              <img
                :src="item.img.fhd"
                class="cover"
                :class="{'cover-active': groupData.focArr[0][index*2]}"
                :data-index="'tar_0_'+(index*2)"
                alt
              >
              <div class="item-info">
                <div class="item-head">
                  <p class="voter-title">{{item.name}}</p>
                  <p class="item-title">{{item.subname}}</p>
                  <hr>
                  <div class="text" :data-index="'tar_0_'+ (index*2 +1)">
                    <p>{{ item.count }}</p>
                    <p>当前票数</p>
                  </div>
                </div>
                <div class="voter-btn" :class="{active: groupData.focArr[0][index*2+1]}">投TA一票</div>
              </div>
            </div>
          </div>
        </multiList>
      </scroll-container>
    </div>
    <msg :msgValue="msg"></msg>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import msg from "@/components/msg";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312,
    msg
  },
  methods: {
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    getList() {
      // 获取选项列表
      this.hs.ajax.get(
        // "http://" +  this.$store.state.domain + "/SMSCH-STB/vote/items?voteId=" + this.voteItem.more.id + '&pageNum=' + this.bridge.stbid + '&pageSize=10',
        "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/vote/items?voteId=" +
          this.voteId +
          "&schoolId=" +
          this.$store.state.school.id,
        data => {
          data = JSON.parse(data);
          //console.log(data);
          if (data.head.code === 1) {
            this.groupData.dataArr[0].data = data.body.concat(data.body);
            this.voteOptions = data.body;
          }
        },
        0,
        function(msg) {},
        3000
      );
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.hs.initFocus("0-" + this.index);

    // 处理所有点击逻辑
    this.hs.addSelect(this.groups, (group, objid, objindex) => {
      // this.setBackObj({backFocArr: [this.hs.focObj.objid]});
      let url =
        "http://" +
        this.$store.state.domain +
        "/SMSCH-STB/vote/exc?stbid=" +
        this.bridge.stbid +
        "&voteId=" +
        this.voteId +
        "&voteItemId=" +
        this.groupData.dataArr[0].data[objindex].id;

      if (Object.keys(this.$store.state.user).length > 0)
        url += "&user=" + this.$store.state.user.username;

      if (group === 0) {
        if (objindex % 2 == 0) {
          this.msg = { msg: "开启全屏播放功能" };
        } else {
          this.hs.ajax.get(
            url,
            data => {
              data = JSON.parse(data);
              //console.log(data);
              if (data.head.code !== 1) {
                this.msg = { msg: data.head.desc };
                return;
              }
              //console.log(data.body);
              this.msg = { msg: "投票成功." };
            },
            0,
            function(msg) {},
            3000
          );
        }
      } else if (group === 1) {
      }
    });

    //  查看是否有记忆焦点
    if (this.hs.cookie.get(this.backObjName)) {
      let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
      let focArr = backObj.backFocArr;
      this.hs.cookie.delOne(this.backObjName);
      //console.log(JSON.stringify(focArr));
      this.hs.initFocus(focArr[0]);
    }
  },
  data() {
    return {
      groups: [0],
      scrollY: 0,
      backObjName: "voter-detail",
      hs: this.$store.state.hs,
      bridge: this.$store.state.bridge,
      groupData: {
        dataArr: [
          {
            maxLine: 2,
            dynamic: false,
            title: "",
            data: []
          }
        ],
        focArr: [[]]
      },
      voteId: this.$route.params.voteId,
      index: this.$route.params.index,
      voteOptions: [],
      msg: ""
    };
  }
};
</script>
<style lang="less" scoped>
.main {
  position: relative;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  display: flex;
  .title {
    position: absolute;
    top: 77px;
    right: 121px;
    font-size: 60px;
    color: #e8e8e8;
  }
  .bg1 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    z-index: -1;
  }
  .lesson-list {
    margin-top: 184px;
    margin-left: 120px;
    overflow: hidden;
    .item-list {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      .con {
        position: relative;
        overflow: hidden;
        width: 1680px;
        height: 601px;
        margin-bottom: 48px;
        padding: 24px;
        background-color: #74c1e5;
        border-radius: 8px;
        display: flex;
        .item-info {
          margin-left: 23px;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 614px;
          .item-head {
            display: flex;
            flex-direction: column;
            padding: 24px;
            width: 100%;
            height: 366px;
            background-color: #61b3da;
            box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
            font-size: 22px;
            .voter-title {
              font-size: 36px;
              color: #414141;
              margin-bottom: 17px;
            }
            .item-title {
              margin-bottom: 17px;
              font-size: 48px;
              line-height: 40px;
              color: #414141;
            }
            hr {
              height: 2px;
              border: dashed 1px #3586ac;
            }
            .text {
              display: flex;
              flex-direction: column;
              align-items: center;
              p:nth-child(1) {
                height: 81px;
                line-height: 81px;
                font-size: 102px;
                color: #92306f;
                margin-top: 40px;
                margin-bottom: 30px;
              }
              p:last-child {
                font-size: 28px;
                color: #205a75;
                margin-bottom: 37px;
              }
            }
          }
          .voter-btn {
            background: #61b3da;
            width: 366px;
            height: 116px;
            line-height: 116px;
            text-align: center;
            border-radius: 58px;
            margin-top: 48px;
            font-size: 48px;
            color: #414141;
          }
        }
      }
      .cover {
        width: 968px;
        height: 553px;
      }
      .t_bg {
        position: absolute;
        left: 0px;
        top: 158px;
        width: 384px;
        height: 56px;
        background-color: #000000;
        opacity: 0.7;
        border-bottom-right-radius: 9px;
        border-bottom-left-radius: 9px;
      }

      .t_move {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 356px;
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .sub_title {
        position: absolute;
        left: 0px;
        top: 238px;
        width: 384px;
        height: 30px;
        .name,
        .time {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 192px;
          height: 30px;
          line-height: 30px;
          font-size: 30px;
        }
        .time {
          left: 192px;
          text-align: right;
        }
      }
    }
    .content {
      height: 896px;
      overflow: hidden;
    }
  }
  .active {
    border: 2px solid #ffffff;
    background: #0e60e9 !important;
    color: #fff !important;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
  .cover-active {
    border: 2px solid #ffffff;
    background: #0e60e9 !important;
    color: #fff !important;
    // transform: scale(1);
    // -webkit-transform: scale(1);
  }
}
</style>
